<template>
  <v-main class="Dashboard-container pa-4">
    <v-row no-gutters>
      <v-col
        v-if="zoomStatus !== 'fullscreen'"
        :cols="taskCol"
        class="left-wrap pr-4"
      >
        <v-row class="header mb-2" no-gutters>
          <v-col class="d-flex justify-end">
            <span class="switch-text">Team</span>
            <v-switch
              v-model="isMyself"
              class="switch pa-0 mt-0 mx-2"
              hide-details=""
              color="#D9D9D9"
              inset
            ></v-switch>
            <span class="switch-text">Myself</span>
          </v-col>
        </v-row>
        <v-row no-gutters>
          <v-col>
            <TaskCard
              rounded
              class="rounded-lg"
              :class="{ active: isPendingTask }"
              color="#F8B254"
              background-color="#BABABC"
              height="16"
              name="Pending Task"
              :total="12"
              :num="3"
              @click="openPendingTask"
            ></TaskCard>
          </v-col>
          <v-col class="pl-4">
            <TaskCard
              rounded
              class="rounded-lg"
              :class="{ active: !isPendingTask }"
              color="#EA694D"
              textColor="#EA694D"
              background-color="#BABABC"
              height="16"
              name="Delayed Task"
              :total="12"
              :num="2"
              @click="openDelayedTask"
            ></TaskCard>
          </v-col>
        </v-row>
        <div class="delayedTask-wrap rounded-lg mt-2">
          <Task
            :title="taskTitle"
            :arrangement="taskArrangement"
            :type="!isPendingTask ? 'delayed' : ''"
            @openMessage="openMessage"
          ></Task>
        </div>
      </v-col>
      <v-col class="right-wrap" :cols="calendarCol">
        <div class="right-top-wrap" :class="[zoomStatus]">
          <ChatBox
            v-if="showMessage"
            @close="closeMessage"
            :items="records"
          ></ChatBox>
          <Calendars v-else></Calendars>
        </div>
        <div
          v-if="zoomStatus === 'out'"
          class="chart-wrap"
          :class="[zoomStatus]"
        ></div>
      </v-col>
    </v-row>
  </v-main>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import TaskCard from "@/components/Dashboard/TaskCard/TaskCard.vue";
import Task from "@/components/Dashboard/Task/Task.vue";
import Calendars from "@/components/Dashboard/Calendars/Calendars.vue";
import ChatBox from "@/components/Dashboard/ChatBox/ChatBox.vue";

@Component({
  components: {
    TaskCard,
    Task,
    Calendars,
    ChatBox,
  },
})
export default class DashBoard extends Vue {
  get zoomStatus() {
    return this.$store.state.DashboardStore.zoomStatus;
  }

  isPendingTask = false;
  openPendingTask() {
    this.isPendingTask = true;
  }

  openDelayedTask() {
    this.isPendingTask = false;
  }

  get taskArrangement() {
    return "compact";
    // if (this.zoomStatus !== "out") return "compact";
    // return "relax";
  }
  isMyself = false;
  // message
  showMessage = false;
  openMessage() {
    this.showMessage = true;
  }

  closeMessage() {
    this.showMessage = false;
  }
  records = [
    {
      text: "Hello Kin, where are you now?",
      time: "15:50",
      isSelf: true,
      read: true,
    },
    {
      text: "Hey, I am on my Way",
      time: "15:51",
      isSelf: false,
      read: true,
    },
    {
      text: "I'll be there in ten minutes, thank you!",
      time: "15:51",
      isSelf: false,
      read: false,
    },
  ];

  get taskTitle() {
    let taskTitle = "";
    taskTitle += this.isMyself ? "" : "Team- ";
    taskTitle += this.isPendingTask ? "Pending Task" : "Delayed Task";
    return taskTitle;
  }

  get taskCol() {
    return this.$store.state.DashboardStore.taskCol;
  }

  get calendarCol() {
    return this.$store.state.DashboardStore.calendarCol;
  }

  mounted() {
    console.log("Dashboard Mounted");
  }
}
</script>

<style lang="scss">
@import "@/views/01000000-Dashboard/Dashboard.scss";
</style>
